import { Navigate,useRoutes } from "react-router-dom";
import Login from "../components/Login";
import Main from "../components/Main";
import About from "../components/Main/about";
import Home from "../components/Main/home";
import Music from "../components/Main/home/music";
import News from "../components/Main/home/news";


// children是二级路由,注意二级路由要包裹在一级路由中,依次类推
const routes =[
   {
  path:"/login",
  element:<Login/>
},
  {
    path:"/main",
    element:<Main/>,
    children:[
      {
        path:"/main/home",
        element:<Home/>,
        children:[
          {
            path:"/main/home/news",
            element:<News/>,
          },
          {
            path:"/main/home/music",
            element:<Music/>,
          }
        ]
      },
      {
        path:"/main/about",
        element:<About/>
      },

    ]
  },
 
  {
    path:"*",
    element:<Main/>
  },
  {
    path:"/",
    element:<Navigate to="/login"/>
  }
]

export default routes

// 我们希望把生成路由表的东西交给我们routes,让他直接生成每一个路由组成的表交接给我们

// 这样的写法,认为定义了 GetRouters 组件  这个组件就是根据路由表生成的  路由配置结构
export const GetRouters=()=>{
  // 返回值是真正的路由配置,所有需要的值路 由的一切都在这里配着,App需要用就只需要引入函数调用就可以了(但要注意hooks规范,需要优化)
  // 在组件中,函数式组件内部外层可以使用hook
  return useRoutes(routes)
}



// 自定义hook  对原有的hooks进行一些操作  函数式组件中用use开头的一般都是自定义hooks,想干嘛干嘛
export const useMyRoutes=()=>{
  // 在自定义hooks中可以使用hooks
  return useRoutes(routes)
}

/* 
  使用hooks两个条件
     1.在组件中,函数式组件内部外层可以使用hook
     2. 在自定义hooks中可以使用hooks  自定义hooks use开头

  如果暴露是组件就按组件来使用  暴露hooks就按照hooks的方式来使用
*/

/* 
  什么是函数式组件,是函数 返回是组件标签  首字母大写
*/